<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>windows环境零基础使用hexo框架+Github搭建个人博客 | 蓝湖畔淅淅沥沥的雨</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="介绍 Hexo是一个基于nodejs的静态 (划重点) 博客网站生成器，可以让用户通过简单的操作快速生成一系列静态文件。 此外利用它搭建博客，还需要版本控制系统Git  前置  Nodejs 在Nodejs官网下载一个长期维护的稳定版本(LTS版本)后，无脑下一步安装即可 安装完成后，打开命令行 (按组合键win+r，在弹出窗口中输入cmd后按回车)，分别输入以下语句，若成功显示版本号，则说明安">
<meta property="og:type" content="article">
<meta property="og:title" content="windows环境零基础使用hexo框架+Github搭建个人博客">
<meta property="og:url" content="http://example.com/2022/05/05/windows%E7%8E%AF%E5%A2%83%E9%9B%B6%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8hexo%E6%A1%86%E6%9E%B6+Github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/index.html">
<meta property="og:site_name" content="蓝湖畔淅淅沥沥的雨">
<meta property="og:description" content="介绍 Hexo是一个基于nodejs的静态 (划重点) 博客网站生成器，可以让用户通过简单的操作快速生成一系列静态文件。 此外利用它搭建博客，还需要版本控制系统Git  前置  Nodejs 在Nodejs官网下载一个长期维护的稳定版本(LTS版本)后，无脑下一步安装即可 安装完成后，打开命令行 (按组合键win+r，在弹出窗口中输入cmd后按回车)，分别输入以下语句，若成功显示版本号，则说明安">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-05-05T13:05:27.000Z">
<meta property="article:modified_time" content="2022-05-06T04:42:23.726Z">
<meta property="article:author" content="StarsWhisper">
<meta property="article:tag" content="git">
<meta property="article:tag" content="博客搭建">
<meta property="article:tag" content="web">
<meta property="article:tag" content="hexo">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="蓝湖畔淅淅沥沥的雨" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

  
<link rel="stylesheet" href="/plugin/bganimation/bg.css">

  

  <link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css" rel="stylesheet" type="text/css">
<meta name="generator" content="Hexo 6.1.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <div class="widget-wrap mobile-header">
  <h3 class="widget-title"></h3>
  <div class="widget">
    <img class="avatar" src="/images/avatar.png">
    <h2 class="author">StarsWhisper</h2>
    <h3 class="description"></h3>
    <div class="count-box">
      <a href="/archives"><div><strong>75</strong><br>文章</div></a>
      <a href="/categories"><div><strong>31</strong><br>分类</div></a>
      <a href="/tags"><div><strong>56</strong><br>标签</div></a>
    </div>
    <ul class="blog-link">
     
          <a href="/" title="Home">
            <li>主页</li>
          </a>
        
          <a href="/archives" title="Archives">
            <li>归档</li>
          </a>
        
          <a href="/categories" title="Categories">
            <li>分类</li>
          </a>
        
          <a href="/tags" title="Tags">
            <li>标签</li>
          </a>
        
          <a href="/knightabout" title="Knightabout">
            <li>关于</li>
          </a>
        
          <a href="/bridges" title="Bridges">
            <li>传送门</li>
          </a>
        
          <a href="/announcement" title="Announcement">
            <li>公告</li>
          </a>
        
    </ul>
  </div>
</div>

        <section id="main"><article id="post-windows环境零基础使用hexo框架+Github搭建个人博客" class="wow slideInRight article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/05/05/windows%E7%8E%AF%E5%A2%83%E9%9B%B6%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8hexo%E6%A1%86%E6%9E%B6+Github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" class="article-date">
  <time class="post-time" datetime="2022-05-05T13:05:27.000Z" itemprop="datePublished">
    <span class="post-month">5月</span><br/>
    <span class="post-day">05</span>
  </time>
</a>
   
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      windows环境零基础使用hexo框架+Github搭建个人博客
    </h1>
  

        <div>
          
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E6%95%99%E7%BB%83%E6%88%91%E6%83%B3%E5%AD%A6%E6%8C%82%E8%BE%B9%E8%BA%B2%E7%89%9B/">教练我想学挂边躲牛</a>,<a class="article-category-link" href="/categories/%E6%95%99%E7%BB%83%E6%88%91%E6%83%B3%E5%AD%A6%E6%8C%82%E8%BE%B9%E8%BA%B2%E7%89%9B/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/">博客搭建</a>
  </div>

          
              

          
        </div>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="介绍"><a class="markdownIt-Anchor" href="#介绍"></a> 介绍</h2>
<p><strong>Hexo</strong>是一个基于<strong>nodejs</strong>的<u><strong>静态</strong></u> <strong>(划重点)</strong> 博客网站生成器，可以让用户通过简单的操作快速生成一系列静态文件。</p>
<p>此外利用它搭建博客，还需要版本控制系统<strong>Git</strong></p>
<h2 id="前置"><a class="markdownIt-Anchor" href="#前置"></a> 前置</h2>
<h4 id="nodejs"><a class="markdownIt-Anchor" href="#nodejs"></a> Nodejs</h4>
<p>在<a target="_blank" rel="noopener" href="https://nodejs.org/zh-cn/">Nodejs官网</a>下载一个长期维护的稳定版本(LTS版本)后，无脑下一步安装即可</p>
<p>安装完成后，打开<strong>命令行</strong> <em>(按组合键win+r，在弹出窗口中输入cmd后按回车)</em>，分别输入以下语句，若成功显示版本号，则说明安装成功。其中<strong>npm</strong>是Nodejs包管理和分发工具。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>
<h4 id="git"><a class="markdownIt-Anchor" href="#git"></a> Git</h4>
<p>从<a target="_blank" rel="noopener" href="https://git-scm.com/">Git官网</a>下载<strong>Git</strong>， 可以使用与上面相似的方法查看Git是否安装成功</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git --version</span><br></pre></td></tr></table></figure>
<h2 id="hexo的安装"><a class="markdownIt-Anchor" href="#hexo的安装"></a> Hexo的安装</h2>
<p>我们先找好或新建一个文件夹(最好是空文件夹)，当作储存博客信息的地方，并在这个文件夹中通过右键菜单打开<strong>Git Bash</strong>(与命令行类似)</p>
<p>在<strong>Git Bush</strong>中输入下方语句安装<strong>hexo</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-cli -g</span><br></pre></td></tr></table></figure>
<p>成功安装之后，它会反馈给你一个版本以及安装时间(至少我安装的时候是这样)，你也可以通过命令来查看版本明细</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo -v</span><br></pre></td></tr></table></figure>
<h2 id="生成静态文件并将网页服务在本地运行"><a class="markdownIt-Anchor" href="#生成静态文件并将网页服务在本地运行"></a> 生成静态文件并将网页服务在本地运行</h2>
<p>按顺序执行下方代码:</p>
<p>初始化操作，这一步操作后，生成网页的基础条件就达成了</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init</span><br></pre></td></tr></table></figure>
<p>生成网页，由于现在还没有对相应文件做任何改动，所以生成默认的landscape主题网页</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br></pre></td></tr></table></figure>
<p>在本地运行网页服务</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure>
<p>默认在你机器的4000端口开启网页服务(因为刚才的指令没有加别的参数)，可以在浏览器中输入localhost:4000查看</p>
<p>但是一旦你在<strong>Git Bush</strong>中关闭了服务，网页服务就会终止，若想让网页长久存在，需要把它发布到互联网(挂到github的服务器)上。</p>
<h2 id="把网页挂到互联网上"><a class="markdownIt-Anchor" href="#把网页挂到互联网上"></a> 把网页挂到互联网上</h2>
<h4 id="建立github仓库"><a class="markdownIt-Anchor" href="#建立github仓库"></a> 建立github仓库</h4>
<p>若没有github账号需要先注册。</p>
<p>新建一个名称为: <strong><a target="_blank" rel="noopener" href="http://xn--6qqv7i14ofosyrb.github.io">你的用户名.github.io</a></strong>的仓库，其他配置可以都不管。</p>
<p>建立仓库的方法是：</p>
<blockquote>
<p>1.点击右上角你的头像，在下拉框中点击<strong>Your repositories</strong></p>
<p>2.你能看到一个绿色的New，点击它创建一个新的仓库</p>
<p>3.仓库名必须要是&quot;<a target="_blank" rel="noopener" href="http://xn--6qqv7i14ofosyrb.github.io">你的用户名.github.io</a>&quot; 其他的不用管，直接点Create repositories创建仓库</p>
</blockquote>
<h4 id="生成ssh-key"><a class="markdownIt-Anchor" href="#生成ssh-key"></a> 生成SSH key</h4>
<p>先配置一些变量，这算是你的身份标识，在对应的地方填写你的用户名和注册邮箱</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name &quot;用户名&quot;</span><br><span class="line">git config --global user.email &quot;注册邮箱&quot;</span><br></pre></td></tr></table></figure>
<p>输入这两条语句可以查看这两个变量是否修改成功</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config user.name</span><br><span class="line">git config user.email</span><br></pre></td></tr></table></figure>
<p>然后生成ssh key 一直按回车就行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C &quot;注册邮箱&quot;</span><br></pre></td></tr></table></figure>
<p>然后在你电脑的 <strong>C:\Users\你的windows用户名.ssh ** 目录下会生成key的信息， 其中Users目录的名字在你的电脑上可能汉化成了&quot;用户&quot;，若如此，你应该寻找</strong>C:\用户\你的windows用户名.ssh **目录</p>
<h4 id="把ssh-key添加到github"><a class="markdownIt-Anchor" href="#把ssh-key添加到github"></a> 把SSH key添加到Github</h4>
<p>我们需要在Github中新建SSH key</p>
<blockquote>
<p>1.点击右上角你的头像，在下拉菜单中点击<strong>Settings</strong></p>
<p>2.在左边找到<strong>SSH and GPG keys</strong>选项卡，点击</p>
<p>3.点击哪个绿油油的<strong>New SSH key</strong></p>
<p>4.你需要确认一件事，在.ssh目录中，后缀名为id_rsa.pub文件是公钥，没有后缀名的id_rsa文件是私钥，公钥是可以任何人知道的，而私钥你必须保密(感兴趣的去查询非对称密码体制，RAS算法)，所以你在下一步一定要保证你上传的是公钥</p>
<p>5.在Title中随便为SSH key取一个名字，用记事本打开.ssh目录中的公钥<strong>id_rsa.pub</strong>原封不动地复制粘贴到Key框中，开头结尾不要多加空格，你添加的东西和公钥内容完全相同。然后点击Add SHH key</p>
</blockquote>
<h4 id="将网页部署到github"><a class="markdownIt-Anchor" href="#将网页部署到github"></a> 将网页部署到Github</h4>
<p>打开你存放博客信息的文件夹，在刚才用hexo init命令初始化出来的文件中找到配置文件 <strong>_config.yml</strong> ，用记事本打开它，拉到最下面，修改以下信息，没有的就自己加上。(实际上repo对应的就是你仓库的连接)(我猜会不会跟&quot;种族主义&quot;有关，github现在建议你将master分支改成main，如果你改了的话，branch应该对应main而不是master，如果你没改就当我放P)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: https://github.com/你的Github用户名/你的Github用户名.github.io.git</span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure>
<p>在<strong>Git Bush</strong>输入以下命令，安装deploy-git</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>
<p>然后输入命令</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean (清空hexo缓存(有时你更新了网页内容却发现没有更新，建议清空一下缓存))</span><br><span class="line">hexo generate (根据你当前的配置生成网页文件)</span><br><span class="line">hexo deploy (把网页部署到github服务器上)</span><br></pre></td></tr></table></figure>
<p>这三句可以简写为</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure>
<p>你还记得hexo s是干嘛的吗?</p>
<p><strong>在浏览器中输入 你的用户名.github.io即可查看博客</strong></p>
<h2 id="注意"><a class="markdownIt-Anchor" href="#注意"></a> 注意</h2>
<p>1.国内网络访问Github可能非常不稳定，有时候传不上去，可以尝试多试几次或者搭个梯子。很长时间传不上去也无所谓，在本地测试好明天再传。</p>
<p>2.如果你改了东西在浏览器上体现不出来，不妨试一下ctrl+f5刷新浏览器缓存。</p>
<p>3.文件传到Github后，在服务器上部署需要花一段时间，可以在你仓库中点击Actions菜单查看，部署完成后，再访问才会显示修改后的结果。</p>
<h2 id="完结撒花"><a class="markdownIt-Anchor" href="#完结撒花"></a> 完结撒花</h2>
<p>关于如何发布博客、让博客应用其他的主题，以及想看我这个啥也不会的垃圾怎么摸索魔改博客的，欢迎来读我的其他文章</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/05/05/windows%E7%8E%AF%E5%A2%83%E9%9B%B6%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8hexo%E6%A1%86%E6%9E%B6+Github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/" data-id="cl2uhoebr000te4j37f8zb76j" class="article-share-link">分享</a>
      
      
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/git/" rel="tag">git</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/" rel="tag">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/" rel="tag">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" rel="tag">博客搭建</a></li></ul>

    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2022/05/06/%E4%BD%BF%E7%94%A8hexo%E6%A1%86%E6%9E%B6%E5%8F%91%E5%B8%83%E5%8D%9A%E5%AE%A2/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">上一篇</strong>
      <div class="article-nav-title">
        
          hexo框架下博客的创建、编辑和发布
        
      </div>
    </a>
  
  
    <a href="/1444/11/11/%E3%80%90%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E3%80%91%E3%80%90python%E3%80%91%E3%80%90opencv%E3%80%91%E8%87%AA%E5%AD%A6%E7%AE%80%E8%A6%81%E8%AE%B0%E5%BD%95%EF%BC%88%E6%9C%AA%E5%AE%8C%EF%BC%89/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">下一篇</strong>
      <div class="article-nav-title">【已重置】【学习记录】【python】【opencv】自学简要记录</div>
    </a>
  
</nav>

  
</article>



</section>
        
          <aside id="sidebar">
  
    <div class="widget-wrap">
  <h3 class="widget-title"></h3>
  <div class="widget">
    <h1 class="blog-title">蓝湖畔淅淅沥沥的雨</h1>
    <h2 class="blog-subtitle">All tragedy erased, I see only wonders...</h2>
    <ul class="blog-link">
     
          <a href="/" title="Home">
            <li>主页</li>
          </a>
        
          <a href="/archives" title="Archives">
            <li>归档</li>
          </a>
        
          <a href="/categories" title="Categories">
            <li>分类</li>
          </a>
        
          <a href="/tags" title="Tags">
            <li>标签</li>
          </a>
        
          <a href="/knightabout" title="Knightabout">
            <li>关于</li>
          </a>
        
          <a href="/bridges" title="Bridges">
            <li>传送门</li>
          </a>
        
          <a href="/announcement" title="Announcement">
            <li>公告</li>
          </a>
        
    </ul>
  </div>
</div>

  
    <div class="widget-wrap">
  <h3 class="widget-title"></h3>
  <div class="widget">
    <img class="avatar" src="/images/avatar.png">
    <h2 class="author">StarsWhisper</h2>
    <h3 class="description"></h3>
    <div class="count-box">
      <a href="/archives"><div><strong>75</strong><br>文章</div></a>
      <a href="/categories"><div><strong>31</strong><br>分类</div></a>
      <a href="/tags"><div><strong>56</strong><br>标签</div></a>
    </div>



    <div class="social-link">
      
        <a class="hvr-bounce-in" href="https://github.com/Wldcmzy" target="_blank" title="Github">
          Github
        </a>
      
        <a class="hvr-bounce-in" href="https://blog.csdn.net/wldcmzy" target="_blank" title="CSDN">
          CSDN
        </a>
      
        <a class="hvr-bounce-in" href="https://space.bilibili.com/83743701" target="_blank" title="bilibili(无技术和学习内容)">
          bilibili(无技术和学习内容)
        </a>
      
    </div>

    <div class="friend-link">
      <h2>友情链接</h2>
      
        <a class="hvr-bounce-in" href="https://shanamaid.github.io/" target="_blank" title="夏娜主题作者的博客">
          夏娜主题作者的博客
        </a>
      
    </div>
  </div>
</div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy;2021 - 2022 StarsWhisper<br>
      由<a href="http://hexo.io/" target="_blank">Hexo</a>强力驱动 | 
      主题-<a target="_blank" rel="noopener" href="https://github.com/ShanaMaid/hexo-theme-shana">Shana</a>(但是魔改)
      
    </div>
    
  </div>
</footer>
    </div>
    

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/wow/0.1.6/wow.min.js"></script>
<script>
new WOW().init();
</script>   


  
<link rel="stylesheet" href="/plugin/fancybox/jquery.fancybox.css">

  
<script src="/plugin/fancybox/jquery.fancybox.pack.js"></script>




  
<link rel="stylesheet" href="/plugin/galmenu/GalMenu.css">

  
<script src="/plugin/galmenu/GalMenu.js"></script>

  <div class="GalMenu GalDropDown">
      <div class="circle" id="gal">
        <div class="ring">
          
            <a href="/announcement" title="" class="menuItem">公告</a>
          
            <a href="/tags" title="" class="menuItem">标签</a>
          
            <a href="/categories" title="" class="menuItem">分类</a>
          
            <a href="/archives" title="" class="menuItem">归档</a>
          
            <a href="/knightabout" title="" class="menuItem">关于</a>
          
            <a href="/bridges" title="" class="menuItem">传送门</a>
          
        </div>
        
          <audio id="audio" src="#"></audio>
        
      </div> 
</div>
<div id="overlay" style="opacity: 1; cursor: pointer;"></div>
  <script type="text/javascript">var items = document.querySelectorAll('.menuItem');
    for (var i = 0,
    l = items.length; i < l; i++) {
      items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
      items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
    }</script>
<script type="text/javascript">
  $(document).ready(function() {
    $('body').GalMenu({
      'menu': 'GalDropDown'
    })
  });
</script>

  <section class="hidden-xs"> 
  <ul class="cb-slideshow"> 
    <li><span>苟利</span></li> 
    <li><span>国家</span></li> 
    <li><span>生死以</span></li> 
    <li><span>岂能</span></li> 
    <li><span>祸福</span></li> 
    <li><span>趋避之</span></li> 
  </ul>
</section>

<script src="/js/script.js"></script>




  </div>
</body>
</html>